<template>
  <div class="page-user-wrap">
    <div class="inner w-1400">
      <page_breadcrumb :option="nav_option" title="会员中心"/>

      <div class="page-ctx">
        <div>
        <div class="menu-wrap">
          <!-- <div class="left-title"></div> -->
          <div class="nav-wrap">
            <div
              class="nav-group"
              v-for="(group, gindex) in page_menu"
              :key="gindex"
            >
              <div class="sub-child" v-if="group.child && group.child.length">
                <div
                  class="sub-item"
                  v-for="(item, index) in group.child"
                  :class="$route.name == item.route ? 'active' : ''"
                  :key="index"
                  @click="do_toggle_nav(item)"
                >
                  <div
                    class="sub-title"
                    :class="$route.name == item.route ? 'active' : ''"
                  >
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="menu-wrap">
          <div class="left-title">数据统计</div>
          <div class="nav-wrap">
            <div
              class="nav-group"
              v-for="(group, gindex) in page_router"
              :key="gindex"
            >
              <div class="sub-child" v-if="group.child && group.child.length">
                <div
                  class="sub-item"
                  v-for="(item, index) in group.child"
                  :class="$route.name == item.route ? 'active' : ''"
                  :key="index"
                  @click="do_toggle_nav(item)"
                >
                  <div
                    class="sub-title"
                    :class="$route.name == item.route ? 'active' : ''"
                  >
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        <div class="view-wrap">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SHOP_TYPE } from "@/config/env.js";

import page_breadcrumb from "@/components/page/page-breadcrumb.vue";

import { mapState } from "vuex";

export default {
  name: "my",
  components: {
    page_breadcrumb,
  },
  data() {
    return {
      //个人中心导航
      all_menu: [
        {
          title: "订单管理",
          route: "",
          icon: require("@img/my/nav-1.png"),
          child: [
            {
              title: "客户管理",
              route: "business-index",
            },
            {
              title: "订单管理",
              route: "business-order-list",
            },
            {
              title: "个人资料",
              route: "business-my-info",
            },
            {
              title: "修改密码",
              route: "business-change-password",
            },
          ],
        },
      ],
      activeRoute: "",
      openeds: ["order-list"],
    };
  },
  computed: {
    // ...mapState(["",]),
    nav_option() {
      let option = [
        { route: "/my-index", title: "用户中心", title2: "Personal Center" },
        {
          route: "",
          title: this.$route.meta.title,
          title: this.$route.meta.title,
        },
      ];
      return option;
    },

    page_menu() {
      let navList = [];
      navList = this.all_menu;
      return navList;
    },
    page_router(){
      return [
        {
          title: "数据统计",
          route: "",
          icon: require("@img/my/nav-1.png"),
          child: [
            {
              title: "业绩统计",
              route: "yeji-static",
            },
            {
              title: "药品统计",
              route: "yao-static",
            },
          ],
        },
      ];
    }
  },

  //导航激活
  beforeRouteUpdate(to, from, next) {
    //console.log("组件复用 from", from);
    //console.log("组件复用 to", to);

    next();

    this.activeRoute = to.path.replace("/", "");
  },

  watch: {},
  created() {
    // this.subArr = this.subNavArr[0];
  },

  mounted() {},

  methods: {
    do_toggle_nav(item) {
      if (!item.route) {
        // let route = item.sub[0].route;
        // this.$router.push("/" + route);
      } else {
        this.$router.push("/" + item.route);
      }
    },
  },
};
</script>

<style scoped lang="less">
.page-user-wrap {
  background: #f9fafc;
  padding-top: 20px;

  .inner {
    margin: 0 auto;
    min-height: 70vh;

    .page-ctx {
      padding-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .menu-wrap {
      width: 220px;
      min-width: 220px;
      margin-bottom: 20px;
      background: #f9f9f9;
      background: #fff;
      padding-bottom: 20px;
      padding-top: 20px;

      .left-title {
        padding: 17px 0;
        padding-left: 22px;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
      }

      .title-line {
        margin: 0 auto;
        width: 196px;
        background: #f0f0f0;
        height: 1px;
      }

      .nav-wrap {
        .nav-group {
          // margin-bottom: 10px;
          &::after {
            content: "";
            display: inline-block;
            margin: 0 auto;
            width: 196px;
            height: 1px;
            background: #f0f0f0;
          }

          &:last-child {
            &::after {
              display: none;
            }
          }

          .group-title-box {
            padding: 14px 14px;
            cursor: pointer;

            .icon-box {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 32px;
              height: 22px;

              img {
                height: 14px;
              }
            }

            .group-title {
              flex: 1;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: bold;
              font-size: 16px;
              color: #333333;
            }

            .arrow-box {
              img {
              }

              .arrow-down {
                width: 14.22px;
              }

              .arrow-right {
                height: 14.22px;
              }
            }
          }

          .sub-child {
            .sub-item {
              padding: 11px 0px 9px 46px;
              cursor: pointer;
              &.active {
                background: rgba(239, 31, 31, 0.06);
                border-left: 4px solid #EF1F1F;
              }


              .sub-title {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #666666;

                &.active {
                  color: #EF1F1F;
                }
              }
            }
          }
        }

        .nav-item {
          overflow: hidden;

          .nav-title {
            position: relative;
            cursor: pointer;
            padding-left: 30px;
            padding-left: 70px;
            text-align: left;

            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 12px;
            color: #808080;

            &.link {
              margin-bottom: 16px;

              &:hover {
                color: #009f39;
              }
            }

            &.main-title {
              margin-bottom: 24px;
              cursor: pointer;
              padding-left: 50px;
              user-select: none;
              font-family: OPPOSans, OPPOSans;
              font-weight: 400;
              font-size: 14px;
              color: #333333;
            }

            &.active {
              // background: #ffffff;
              // background: #fffaf7;
              color: #009f39;

              &:before {
                // content: "";
                // position: absolute;
                // left: 0;
                // top: 0;
                // bottom: 0;
                // width: 3px;
                // background-color: #009F39;
              }
            }

            &[data-hide="hide"] {
              display: none;
            }
          }

          &:first-child {
            .main-title {
              margin-top: 0;
            }
          }
        }
      }
    }

    .view-wrap {
      flex: 1;
      margin-left: 24px;
      min-height: 50vh;
      padding-bottom: 50px;
    }
  }
}
</style>

<style scoped lang="less" src="@/assets/h5css/user/index.less"></style>
